<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>4.24以前的笔记</title>
</head>
<body>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
Hello Extensions1
</body>
</html>


<h2>创建新仓库的流程</h2>
上一行应该是二级标题<br>
上一行应该换行显示
<p>这里应该是一个段落</p>
<hr>
<h3>在IDEA中创建新项目</h3>
<img src="img.png" >

<h3>在Gitee创建新仓库</h3>
<p>课上作业，用一张图演示如何在在Gitee创建新仓库</p>

<h3>如何将本地web项目跟远程gitee关联</h3>
<ol>
  <li>cd xxx (点击 IDEA 的 Terminal)</li>
  <li>
    gitee 页面倒数第二行命令（注意：最上面应该选择HTTPS）
    <img src="img1.png" width="500">
  </li>
  <li>推送到远程仓库（补充那条命令 git push...）</li>
</ol>


<style>
  /* class="highlight" 的 h1 . */
  .xxx {
    background-color: green;
  }

  /* class="highlight" 的 p */
  xxx.xxx {
    font-style: italic;
  }

  /* class='highlight' and, class 'mainpoint'. */
  .xxx, .xxx {
    color: red;
    background-color: black;
  }
</style>


<p>解释 HTML 新标签：按钮</p>
<!-- js 可以写的位置 - 1: html 标签中的属性，类似 css 的 style 属性 -->
<button onclick="alert('算你牛')">有本事点我啊</button>

<!-- js 可以写的位置类似 css -->
<!-- js 可以写的位置 - 2: script 标签，类似 css 的 style 标签 -->
<script>
    alert('hello js');
</script>


<h2>css操作</h2>
<title>基础选择器 - Element, Class, and ID Selectors</title>
<style>
    /* 所有 h2 元素 */
    xxx {
      color: red;
      text-align: center;
    }

    /* 所有 class="highlight" 的元素 */
    .xxx {
      font-size: 20px;
      font-weight: bold;
      font-style: italic;
      background-color: green;
      opacity: .6;
    }

    /* id="mainPoint" 的元素 */
    #xxx {
      font-size: 24px;
      font-weight: bold;
      background-color: red;
      opacity: .7;
    }

    /* 所有的 p 和 h1 元素, */
    xxx, xxx {
      color: blue;
      text-align: center;
    }
</style>

<title>Element with Class Selector
</title>
<style>
    /* class="highlight" 的 h1 . */
    .xxx {
      background-color: green;
    }

    /* class="highlight" 的 p */
    xxx.xxx {
      font-style: italic;
    }

    /* class='highlight' and, class 'mainpoint'. */
    .xxx, .xxx {
      color: red;
      background-color: black;
    }
</style>



<h2>B站加速</h2>
<head>
    <meta charset="UTF-8">
</head>

<body style="width: 280px;">
<h1>BB Extension</h1>
<p>Extension for bilibili</p>
<ul>
    <li>https://www.bilibili.com/video/*</li>
</ul>
<p>支持功能</p>
<ol>
    <li>
        场景描述：只能调整特定的倍速<br>
        插件解法：通过快捷键快速调整任意倍速<br>
        快捷键用法：<br>
        - 按下 u 键，每次增加 0.5 倍速<br>
        - 按下 d 键，每次减少 0.5 倍速<br>
        - 按下 0 键，回到正常 1.0 倍速<br>
    </li>
</ol>
<script src="popup.js"></script>
</body>


<h2>flex</h2>
<html>
<head>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Flexible Box 弹性布局">
    <title>Flex 垂直居中</title>
    <link rel="stylesheet" href="style/01.css">

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex container 容器、item 项目</title>
    <link rel="stylesheet" href="style/02.css">

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex container 容器属性 - flex-direction</title>
    <link rel="stylesheet" href="style/00.css">
    <style>
        .flex-container {
            /* row, row-reverse, column, column-reverse */
            flex-direction: row-reverse;
        }
    </style>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex container 容器属性 - flex-wrap</title>
    <link rel="stylesheet" href="style/00.css">
    <style>
        .flex-container {
            /*
                nowrap（默认值）：不换行。
                wrap：换行。
                wrap-reverse：换行，第一行在下方。
             */
            flex-wrap: wrap-reverse;
        }
    </style>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex container 容器属性 - justify-content</title>
    <link rel="stylesheet" href="style/00.css">
    <style>
        .flex-container {
            /*
            justify-content 属性定义了项目在主轴上的对齐方式。

                flex-start（默认值）：左对齐
                flex-end：右对齐
                center： 居中
                space-between：两端对齐，项目之间的间隔都相等。
                space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
             */
            justify-content: xxx;
        }
    </style>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex container 容器属性 - align-items</title>
    <link rel="stylesheet" href="style/00.css">
    <style>
        .flex-container {
            /*
            align-items 属性定义项目在交叉轴上如何对齐。

                stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
                flex-start：交叉轴的起点对齐。
                flex-end：交叉轴的终点对齐。
                center：交叉轴的中点对齐。
             */
             align-items: xxx;
        }
    </style>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex item 项目属性 - order</title>
    <link rel="stylesheet" href="style/00.css">
    <style>
        .item {
            /*
                order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
             */
             order: 0;
        }
        .item:first-child {
            order: 0;
        }
        .item:nth-child(2) {
            order: 0;
        }
        .item:last-child {
            order: 0;
        }
    </style>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex item 项目属性 - flex-grow</title>
    <link rel="stylesheet" href="style/00.css">
    <style>
        .item {
            /*
                flex-grow 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
             */
             flex-grow: 0;
        }
        .item:first-child {
            flex-grow: 0;
        }
        .item:nth-child(2) {
            flex-grow: 0;
        }
        .item:last-child {
            flex-grow: 0;
        }
    </style>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex item 项目属性 - flex-shrink</title>
    <link rel="stylesheet" href="style/00.css">
    <style>
        .item {
            /*
                flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
             */
             flex-shrink: 1;
        }
        .item:first-child {
            flex-shrink: 1;
        }
        .item:nth-child(2) {
            flex-shrink: 1;
        }
        .item:nth-child(3) {
            flex-shrink: 1;
        }
        .item:last-child {
            flex-shrink: 1;
        }
    </style>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex 布局</title>
    <link rel="stylesheet" href="style/step/step1.css">
    <link rel="stylesheet" href="style/step/step2.css">
    <link rel="stylesheet" href="style/step/step3.css">
    <link rel="stylesheet" href="style/step/step4.css">
    <link rel="stylesheet" href="style/step/step5.css">
    <link rel="stylesheet" href="style/step/step6.css">
    <link rel="stylesheet" href="style/step/step7.css">

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex item 项目属性 - align-self</title>
    <link rel="stylesheet" href="style/00.css">
    <style>
        .item {
            /*
            align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。

                auto（默认值）：表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
                flex-start：交叉轴的起点对齐。
                flex-end：交叉轴的终点对齐。
                center：交叉轴的中点对齐。
             */
             align-self: auto;
        }
        .item:first-child {
            align-self: auto;
        }
        .item:nth-child(2) {
            align-self: auto;
        }
        .item:last-child {
            align-self: auto;
        }
    </style>
    </head>
</html>
</body>
</html>